<template>
  <div class="game-container">
    <LevelSelect v-if="!gameStarted" @start-game="startGame" />
    <GameStage v-else :selectedLevel="selectedLevel" @back-to-menu="backToMenu" @next-level="nextLevel" />
  </div>
</template>

<script>
import { ref } from 'vue'
import LevelSelect from './components/LevelSelect.vue'
import GameStage from './components/GameStage.vue'

export default {
  components: { LevelSelect, GameStage },
  setup() {
    const gameStarted = ref(false)
    const selectedLevel = ref(null)
    const allLevels = ref([])

    // 获取所有关卡（从LevelSelect）
    // 这里假设LevelSelect.vue导出levels数组
    import('./components/LevelSelect.vue').then(mod => {
      allLevels.value = mod.default.setup().levels.value
    })

    const startGame = (level) => {
      selectedLevel.value = level
      gameStarted.value = true
    }

    const backToMenu = () => {
      gameStarted.value = false
    }

    // 下一关逻辑
    const nextLevel = () => {
      if (!selectedLevel.value || allLevels.value.length === 0) return
      const idx = allLevels.value.findIndex(l => l.id === selectedLevel.value.id)
      const nextIdx = (idx + 1) % allLevels.value.length
      selectedLevel.value = allLevels.value[nextIdx]
    }

    return { gameStarted, selectedLevel, startGame, backToMenu, nextLevel }
  }
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  font-family: 'Press Start 2P', cursive;
  background-color: #111;
  color: white;
}

.game-container {
  width: 100vw;
  height: 100vh;
}
</style>